<template>
    <Tabs :value="name">
        <TabPane label="关系图" name="Image">
            <div class="CodeTabPaneView">
                <div class="imgView"><img src="./image.png" alt /></div>
            </div>
        </TabPane>
        <TabPane label="render.vue" name="Index">
            <div class="CodeTabPaneView">
                <pre class="line-numbers"><code class="language-html">{{ Code[0] }}</code></pre>
            </div>
        </TabPane>
        <TabPane label="small.vue" name="small">
            <div class="CodeTabPaneView">
                <pre class="line-numbers"><code class="language-html">{{ Code[1] }}</code></pre>
            </div>
        </TabPane>
        <TabPane label="big.vue" name="big">
            <div class="CodeTabPaneView">
                <pre class="line-numbers"><code class="language-html">{{ Code[2] }}</code></pre>
            </div>
        </TabPane>
        <TabPane label="store.js" name="store">
            <div class="CodeTabPaneView">
                <pre class="line-numbers"><code class="language-javascript">{{ Code[3] }}</code></pre>
            </div>
        </TabPane>
    </Tabs>
</template>
<script>
import RunderPageVue from './RunderPage.vue?raw'
import SmallConfigPageVue from './SmallConfigPage.vue?raw'
import BigConfigPageVue from './BigConfigPage.vue?raw'
import store from './store?raw'

export default {
    data() {
        return {
            name: 'Image',
            Code: [RunderPageVue, SmallConfigPageVue, BigConfigPageVue, store]
        }
    },
    mounted() {
        setTimeout(() => {
            Prism.highlightAll()
        }, 100)
    }
}
</script>